<template>
  <a-modal :width="950" ref="formRef" v-model:visible="showChartDialog" title="历史报价" top="8vh" title-align="start" @close="closedDialog" :footer="false">
    <div class="quote-detail flex-c">
      <ImgPopover :src="currentItem.productImg">
        <template #con>
          <a-image width="60" height="60" fit="contain" :src="currentItem.productImg" />
        </template>
      </ImgPopover>
      <div>
        <p>{{ currentItem.productName }}</p>
        <p class="sku">{{ currentItem.sku }}</p>
      </div>
    </div>
    <a-range-picker v-model="times" shortcuts-position="left" :shortcuts="rangeShortcuts()" @change="getData" :allow-clear="false" style="width: 260px" />
    <div class="chart-w" style="height: 300px">
      <YfnChart v-if="showChart" :xData="xData" :data="chartData" :option="{ tooltip: { show: true } }" :dataOption="{ label: { show: true } }" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { findMaterialQuoteRecordPage } from '@/api/system'
  import { getStartAndEndTime, rangeShortcuts } from '@/utils/timeFormat'
  import dayjs from 'dayjs'

  onMounted(getData)

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
  })
  const showChartDialog = ref(props.isShow)
  const times = ref(getStartAndEndTime('last_7_days'))
  const xData = ref<Array<string>>([])
  const chartData = ref<Array<string>>([])
  const showChart = ref(false)

  // 查询记录
  async function getData() {
    showChart.value = false
    if (!times.value.length) {
      Message.error('请选择时间范围')
      return
    }
    const res = await findMaterialQuoteRecordPage({
      materialQuoteId: props.currentItem.id,
      endDate: '',
      pageNum: 1,
      pageSize: 1000,
    })
    if (!res) return
    setXData()
    setChartData(res.data?.records || [])
    showChart.value = true
  }
  // 获取时间列表
  function setXData() {
    xData.value = []
    let currentDate = dayjs(times.value[0]).valueOf()
    while (currentDate <= dayjs(times.value[1]).valueOf()) {
      xData.value.push(dayjs(currentDate).format('YYYY-MM-DD'))
      currentDate += 86400000
    }
  }
  // 获取报价列表
  function setChartData(list: Array<any>) {
    let listMap: any = {}
    list.forEach((item: any) => {
      let _date = dayjs(item.quoteDate).format('YYYY-MM-DD')
      listMap[_date] = item.quotePrice
    })
    chartData.value = []
    xData.value.forEach((val: string) => {
      chartData.value.push(listMap[val])
    })
  }

  // 关闭
  function closedDialog() {
    showChartDialog.value = false
    emit('closed')
  }
</script>

<style lang="less" scoped>
  .quote-detail {
    border: 1px solid #ddd;
    min-width: 200px;
    padding: 5px;
    margin-bottom: 10px;
    .sku {
      color: #999;
      margin-top: 4px;
    }
    .arco-image {
      margin-right: 5px;
    }
  }
</style>
